//HTMLCollection
//直接查找
var items1 = document.getElementsByTagName("li");
//间接查找,HTMLCollection
var ul = document.getElementsByClassName('departments');
//element
var p1 = document.getElementById('name');
//间接查找
var items = ul[0].getElementsByClassName('li');

//css选择器查找
//元素
var item2 = document.querySelector(".departments li");
//nodelist 元素集合
var items3 = document.querySelectorAll('.departments li');
//间接
var item3 = ul[0].querySelector('li:nth-child(3)');

//关系查询

//dom创建
var p3 = document.createElement('p');
var p4 = document.createElement('p');
//插入文字
p3.innerText = "吃了吗？"
p4.innerText = "how are you"
    //找到p2
var p2 = document.querySelector('p[name=address]');
p2.after(p3)
p2.before(p4);

// for (var i = 1; i <= 10000; i++) {
//     // ul[0].innerHTML += `<li>财务部${i}</li>`
//     var html = ul[0].innerHTML;
//     html += `<li>财务部${i}</li>`;
//     ul[0].innerHTML = html;
// }
//优化方案
// var html = ul[0].innerHTML;
// for (var i = 1; i <= 10000; i++) {
//     html += `<li>财务部${i}</li>`;
// }
// ul[0].innerHTML = html
//获取p2的自定义属性，返回一个自定义属性的对象DOMStringMap

//p2.dataset
//设置p2的data-img属性值
//p2.dataset.img = "abc"

// 元素的class切换className
//el.classList.toogle(className);
function toggleClass(el, className) {
    //判断el元素的class是否包含className
    if (el.classList.contains(className)) {
        // 如果包含着删除此className
        el.classList.remove(className)
            //返回false
        return false
    } else {
        //如果不包含则添加一个className
        el.classList.add(className)
        return true
    }
};
var start = new Date()

// var str = '';
// for (var i = 0; i <= 10000000; i++) {
//     str += i;
// }
// console.log(str)


var array = [];
for (var i = 0; i <= 10000000; i++) {
    array.push(i);
}
var str = array.join('');
console.log(str)

var end = new Date()
console.log((end - start) / 1000)